<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Visualise osm changeset</title>
    <link rel="stylesheet" href="theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
    <script src="OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer2;

        function log(v) {
        	document.getElementById("docs").innerHTML+="<br>"+v;
        }
        
        function init(){
        	log("init called");
            map = new OpenLayers.Map( 'map', {
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.ScaleLine(),
                        //new OpenLayers.Control.KeyboardDefaults(),
						new OpenLayers.Control.Attribution(),
                    ],
                    numZoomLevels: 6}
            ); 

            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
            map.addLayer(layer);
			map.setCenter(
                //new OpenLayers.LonLat(83.147, 55).transform(
                new OpenLayers.LonLat(0, 0).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 2);
            
		}

		function setId(ff) {
			if(layer2) {log("removing layer"); map.removeLayer(layer2);}
			log("loading new changeset");
			layer2 = new OpenLayers.Layer.Vector("Layer2", {
	            strategies: [new OpenLayers.Strategy.Fixed()],
	            protocol: new OpenLayers.Protocol.HTTP({
    	            url: "desc.kml?changeset="+ff.ed_id.value,
	                format: new OpenLayers.Format.KML({
    	                extractStyles: true, 
        	            extractAttributes: true,
            	        maxDepth: 5
                	})
	            }),
	            eventListeners: {                  
                	loadend: function() {
                		map.zoomToExtent(layer2.getDataExtent());  
                		log("layer loaded!");
                	}
            	}
	        });
            map.addLayer(layer2); 
		}
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Osm changeset viewer</h1>
    <p>(it is helpful already, but is in very early stages of development)</p>

    <div id="tags">
    <form name="changeset">
    	Changeset id: <input type="text" name="ed_id"/>
        <input type="button" onclick="javascript:setId(changeset)" value="load changeset"/>
    </form>
    </div>

    <div id="shortdesc"></div>

    <div id="map" style="width:100%; height:500px"></div>

    <div id="docs">
        <p></p> 
    </div>
  </body>
</html>